<template>
    <div>
        <div class="tools_cell">
            <img src="~@static/img/菜单.png" alt="" @click="showTreeMenu=!showTreeMenu"> 
            <el-input size="small" prefix-icon="el-icon-location-outline" suffix-icon="el-icon-arrow-down" :value="value" placeholder="全国层级"></el-input> 
            <img src="~@static/img/地球.png"  @click="clickLegend('全图')" alt=""> 
        </div>
        <div>
            <div class="left_cell" :style="showOther==false?'margin-left:66px !important;':''" v-show="showTreeMenu">
                <div class="left_title">数据汇集</div> 
                <div class="tree"> 
                    <el-tree :data="data" :props="defaultProps" :check-strictly="true"  node-key="id" show-checkbox  @check="treeCheck" default-expand-all ref="treeForm"></el-tree>
                </div>
            </div>
            <div class="right" v-show="showTestFieldDia">
                <div class="card"> 
                    <div class="card_title"><i></i>{{ testfieldForm.titleText }}（{{ testfieldForm.year }}年）<i class="more_icon"></i></div>
                    <div class="right1_chart" id="chart1"></div>
                </div>
                <div class="card mt14"> 
                    <div class="card_title"><i></i>{{ testfieldForm.titleText }}（{{ testfieldForm.year }}年）<i class="more_icon"></i></div> 
                    <div class="btn_group">
                        <div :class="{'bth_active': isActive==item}" @click="choseBtn(item)" v-for="(item,i) in btnList" :key="i">{{ item }}</div>
                    </div>
                    <div id="chart2"></div>
                </div>
            </div>
        </div>
        <div class="legend" @click="clickLegend('图例')" >图例</div> 

        <div class="legend_part" v-show="showLegend" v-if="!legendList.colorBand">
            <div>图例</div>
            <div>{{ legendList.subText }}</div> 
            <div>
                <div v-for="(item,i) in legendList.data" :key="i">
                    <span :style="{'--bgColor': item.color}"></span>
                    <span>{{ item.name }}</span>
                </div>
            </div>
        </div>  

        <div class="legend_part" v-show="showLegend"  v-else>
            <div>图例</div>
            <div class="color_band" >  
                <div class="style1"></div>
                <!-- <div :class="{'style1': isStyle1, 'style2': isStyle2}"></div> -->
                <div>
                    <span>{{ legendList.data.max }}</span> 
                    <span>{{ legendList.data.min }}</span> 
                </div> 
            </div>
        </div>

        <div class="dialog_bg" v-show="dialogVisible">
            <div class="dialog_box"> 
                <div class="dialog_title flex justify_between">
                    <div class="flex title_left">
                        <div>数据详情</div>
                        <div>
                            <span :class="{'active': diaMenu=='实时数据'}" @click="diaMenu='实时数据'">实时数据</span>
                            <span :class="{'active': diaMenu=='历史数据'}" @click="diaMenu='历史数据'">历史数据</span>
                        </div>
                    </div>
                    <i class="el-icon-close" @click="dialogVisible = false"></i>
                </div>
                <div class="flex">
                    <div class="dev_name"> <span>设备名称: </span> {{ diaTitle }}</div>
                    <div class="dev_name" style="margin-left: 20px;"> <span>采集时间: </span> {{ diaTime }}</div> 
                </div>
                <div class="dev_body flex" v-show="diaMenu=='实时数据'">
                    <div class="dev_img" v-if="diaTitle=='东营农高区传感器'">
                        <img src="~@static/img/土壤传感器-农高区.png" alt="">
                        <div class="layering_cell ngq_layering">
                            <p @click="changeLayer('20')" :class="{'active': layer=='20'}">20cm</p>
                            <p @click="changeLayer('40')" :class="{'active': layer=='40'}">40cm</p>
                            <p @click="changeLayer('60')" :class="{'active': layer=='60'}">60cm</p>
                            <p @click="changeLayer('80')" :class="{'active': layer=='80'}">80cm</p>
                        </div>
                    </div>
                    <div class="dev_img" v-else-if="diaTitle=='东营渤海农场传感器'">
                        <img src="~@static/img/土壤传感器-渤海.png" alt="">
                        <div class="layering_cell bh_layering">
                            <p @click="changeLayer('15')" :class="{'active': layer=='15'}">15cm</p> 
                            <p @click="changeLayer('30')" :class="{'active': layer=='30'}">30cm</p> 
                            <p @click="changeLayer('45')" :class="{'active': layer=='45'}">45cm</p> 
                            <p @click="changeLayer('60')" :class="{'active': layer=='60'}">60cm</p> 
                            <p @click="changeLayer('75')" :class="{'active': layer=='75'}">75cm</p> 
                            <p @click="changeLayer('90')" :class="{'active': layer=='90'}">90cm</p> 
                            <p @click="changeLayer('105')" :class="{'active': layer=='105'}">105cm</p> 
                        </div>
                    </div>
                    <div class="dev_group">
                        <div v-for="(item,i) in devData" :key="i">
                            <img :src="item.img" alt=""> 
                            <div>
                                <p>{{ item.text }}</p>
                                <p>{{ item.num }}</p>
                            </div>
                        </div>
                    </div> 
                </div> 
                <div class="table_cell" v-show="diaMenu=='历史数据'">
                    <table border="0" v-if="diaTitle=='东营农高区传感器'">
                        <thead>
                            <tr class="table_title">
                                <th v-for="(item,i) in tableList.header" :key="i">{{ item }}</th>  
                            </tr>
                        </thead>
                        <tbody class="custom_tbody table_tbody">
                            <tr :class="i%2==0?'tr1':'tr2'" v-for="(data, i) in tableList.data" :key="i">
                                <td>{{ data.deviceCode }}</td> 
                                <td>{{ data.deviceName }}</td> 
                                <td>{{ data.samplingTime }}</td> 
                                <td>{{ data.vwc }}</td> 
                                <td>{{ data.temperature }}</td> 
                                <td>{{ data.permittivity }}</td> 
                                <td>{{ data.apparent }}</td> 
                                <td>{{ data.voidWater }}</td> 
                            </tr>
                        </tbody>
                    </table>
                    <table border="0" v-else-if="diaTitle=='东营渤海农场传感器'">
                        <thead>
                            <tr class="table_title">
                                <th v-for="(item,i) in tableList1.header" :key="i">{{ item }}</th>  
                            </tr>
                        </thead>
                        <tbody class="custom_tbody table_tbody">
                            <tr :class="i%2==0?'tr1':'tr2'" v-for="(data, i) in tableList1.data" :key="i">
                                <td>{{ data.time }}</td> 
                                <td>{{ data.vwc }}</td> 
                                <td>{{ data.temp }}</td> 
                                <td>{{ data.permi }}</td> 
                                <td>{{ data.ecb }}</td> 
                                <td>{{ data.ecp }}</td>  
                            </tr>
                        </tbody>
                    </table>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNum" :page-sizes="[ 20, 30, 40]" :page-size="pageSize" layout="sizes, prev, pager, next" :total="total"></el-pagination>
                </div> 
            </div>
        </div>

        <div class="testField_dialog" v-show="testFieldVisible"> 
            <div class="testField_title flex justify_between">
                <div>
                    <i class="el-icon-caret-right"></i>
                    试验田——详情信息卡
                </div>
                <i class="el-icon-close" @click="testFieldVisible = false"></i>
            </div>
            <img src="~@static/img/试验田.png" alt="">
            <div class="testField_subTitle flex">
                <div>名称</div>
                <div>农高区试验田</div>
            </div>
            <div class="testField_table">
                <table border="0">
                    <thead>
                        <tr class="table_title"> 
                            <th>实验名称</th> 
                            <th>作物类型</th> 
                            <th>代码</th> 
                        </tr>
                    </thead>
                    <tbody class="custom_tbody table_tbody">
                        <tr :class="i%2==0?'tr1':'tr2'" v-for="(data, i) in testFieldList" :key="i"> 
                            <td>{{ data.name }}</td> 
                            <td>{{ data.desc }}</td> 
                            <td>{{ data.code }}</td> 
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>  
import { treeData } from "@/assets/js/treeData.js";
import { DataInJs } from "@/assets/js/legend.js";
export default {
    data() {
        return {
            testfieldForm: {},
            showTestFieldDia: false,
            testFieldVisible: false,
            isActive: "全部",
            diaTitle: "",
            diaTime: "",
            dialogVisible: false,
            pageNum: 1,
            pageSize: 20,
            total: 0,
            diaMenu: "实时数据",
            showOther: false,
            showTreeMenu: true,
            value: "全国层级",
            defaultProps: {
                label: 'label',
                children: 'children'
            },
            data: [],
            currentCheckData: {},   
            legendList: {},
            showLegend: false, 
            legendData: DataInJs(), 
            allTreeData: treeData(), 
            devData: [
                { img: require("@static/img/湿度.png"), text: "土壤体积含水量", num: "61.2" },
                { img: require("@static/img/温度.png"), text: "土壤温度", num: "19.2" },
                { img: require("@static/img/风向.png"), text: "土壤介电常数", num: "135" }, 
                { img: require("@static/img/降雨量.png"), text: "土壤EC", num: "0" },
                { img: require("@static/img/压强.png"), text: "土壤溶液EC", num: "965.5" },
            ],
            tableList: {
                header: ["设备代码", "设备别名", "采样时间", "VWC(%)", "温度(℃)", "介电常数", "表观EC(uS/cm)", "孔隙水EC(uS/cm)"],
                data: [
                    { devNum: "0118_TR1_a", time: "东营土壤1_a", temperature: "2023-08-17 09:41:13", humidness: "0.0", WindSpeed: "31.1", WindDirection: "1.1", rainfall: "0", water: "0" },  
                ]
            },
            tableList1: {
                header: ["采样时间", "土壤体积含水量", "土壤温度", "土壤介电常数", "土壤EC", "土壤溶液EC"],
                data: [
                    { devNum: "0118_TR1_a", time: "东营土壤1_a", temperature: "2023-08-17 09:41:13", humidness: "0.0", WindSpeed: "31.1", WindDirection: "1.1", rainfall: "0", water: "0" },  
                ]
            },
            layer: "",
            testFieldList: [
                { name: "小麦耐盐碱筛选、大豆-麦类轮作", desc: "大豆、小麦", code: "K" },
                { name: "小区实验", desc: "玉米、小麦等", code: "F" },
                { name: "盐碱地改良产品单项田间效果评价", desc: "盐碱地改良产品单项田间效果评价", code: "A" },
                { name: "重大任务局盐碱地大豆协同示范", desc: "大豆", code: "L" },
                { name: "盐碱地特色烟草和药用植物田间种植", desc: "烟草、决明子、枸杞等", code: "G" },
                { name: "耐盐碱粮油作物种植评价", desc: "大豆、玉米、小麦等", code: "B" },
                { name: "耐盐碱特色植物引种及评价", desc: "碱蓬、薄荷、黄金苋等", code: "C" },
                { name: "重大任务局盐碱地油菜协同示范", desc: "油菜", code: "M" },
                { name: "盐碱地豆科牧草（苜蓿）模式示范", desc: "大豆、苜蓿", code: "H" },
                { name: "国创中心揭榜挂帅项目", desc: "玉米等", code: "N" },
                { name: "玉米-小麦轮作", desc: "玉米、小麦", code: "I" },
                { name: "轻度盐碱地技术集成田间效果评价", desc: "玉米、小麦", code: "D" },
                { name: "盐碱地单项栽培技术评价与试验", desc: "玉米", code: "E" },
                { name: "玉米-小麦轮作", desc: "玉米、小麦", code: "J" },
                { name: "玉米-小麦轮作", desc: "玉米、小麦", code: "O" }, 
            ],
            btnList: ["全部","黄河三角洲","东营区","河口区","垦利区","利津县","广饶县"],
            LineUrl: "",
            BarUrl: "" 
        }
    },
    mounted() {   
        let _this = this; 
        _this.getValue(_this.$parent.value);
        this.data = this.allTreeData[this.$parent.value];
        this.$bus.$on("change-select",(res)=>{ 
            this.changeSelect(res);  
        });
        this.$bus.$on("sensor-message",(res)=>{ 
            this.sensorMessage(res);  
        }); 
        _this.$bus.$on("show-testField",(res)=>{
            this.showTestField(res);
        });
        // _this.sensorMessage("东营农高区传感器");
    }, 
    methods: {
        nodeClick(data){ 
            let _this = this;
            _this.showTestFieldDia = data.showTestfield;
            if(data.showTestfield){ 
                _this.testfieldForm = data; 
                if(_this.testfieldForm.titleText.includes("种植结构概览")){
                    _this.LineUrl = `${_this.$baseUrl}/yjd/areaCropInfo/getCropLineData`;
                    _this.BarUrl = `${_this.$baseUrl}/yjd/areaCropInfo/getCropBarData`;
                }else if(_this.testfieldForm.titleText.includes("盐渍化分类分级概览")){
                    _this.LineUrl = `${_this.$baseUrl}/yjd/areaSalinityInfo/getCropLineData`;
                    _this.BarUrl = `${_this.$baseUrl}/yjd/areaSalinityInfo/getCropBarData`;
                }
                _this.getBarData(_this.BarUrl,data.year);
                _this.getLineData(_this.LineUrl,data.year); 
            }            
        },
        getLineData(url,year){
            let _this = this;
            // let url = `${_this.$baseUrl}/yjd/areaSalinityInfo/getCropLineData`;
            let params = {
                year, 
            };
            _this.$axios.get(url, { params: params }).then(res => {
                let result = res.data.data;
                console.log(result);
                let xData = result.xAxis;
                let name = [];
                let data = [];
                for(var key in result){
                    if(key !== "xAxis"){
                        name.push(key);
                        data.push(result[key]); 
                    }
                }
                _this.$nextTick(() => {
                    _this.initChart1(xData,name,data);
                });
            });
        },
        getBarData(url,year){
            let _this = this;
            // let url = `${_this.$baseUrl}/yjd/areaSalinityInfo/getCropBarData`;
            let params = {
                year,
                site: _this.isActive
            };
            _this.$axios.get(url, { params: params }).then(res => { 
                let result = res.data.data;
                let data = [];
                let maxData = [];
                result["yAxis"].forEach((item,index) => {
                    data.push({
                        name: item,
                        value: (result["data"][index]).toFixed(2),
                        sum: result.maxValue,
                    });
                    maxData.push(result.maxValue);
                });
                _this.$nextTick(() => {
                    _this.initChart2(data, maxData);
                });
            });
        },
        showTestField(res){
            this.testFieldVisible = true; 
        },
        initChart2(data, maxData){
            let _this = this;
            var chartDom = document.getElementById("chart2");
            var chart = _this.$echarts.init(chartDom);
            chart.clear();
            chart.resize(); 
            // let data = [
            //     { name: '盐土', value: (Math.random() * 100).toFixed(0), sum: 100 },
            //     { name: '重度盐渍化', value: (Math.random() * 100).toFixed(0), sum: 100 },
            //     { name: '中度盐渍化', value: (Math.random() * 100).toFixed(0), sum: 100 }, 
            //     { name: '轻度盐渍化', value: (Math.random() * 100).toFixed(0), sum: 100 }, 
            //     { name: '非盐渍化', value: (Math.random() * 100).toFixed(0), sum: 100 },  
            // ];
            let getArrByKey = (data, k) => {
                let key = k || "value";
                let res = [];
                if (data) {
                    data.forEach(function (t) {
                        res.push(t[key]);
                    });
                }
                return res;
            }; 
            let color = ['#960303', '#FD2E00', '#F9B857','#36EAAF', '#36EAAF', '#36EAAF'];
            data = data.sort((a,b) => {
                return b.value - a.value
            });
            var option = {
                grid: {
                    top: '2%',
                    bottom: -15,
                    right: 60,
                    left: -42,
                    containLabel: true
                },
                xAxis: {
                    show: false
                },
                yAxis: [{
                    triggerEvent: true,
                    show: true,
                    inverse: true,
                    data: getArrByKey(data, 'name'),
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        color: '#fff',
                        align: 'left',
                        margin: 80,
                        fontSize: 13, 
                    },
                }],
                series: [{
                    name: '条',
                    type: 'bar',
                    zlevel: 1,
                    yAxisIndex: 0,
                    data: data,
                    barWidth: 15,
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            textStyle: {
                                color: '#ffffff',
                                fontSize: '14',
                            },
                            formatter: '{c}Km²'
                        }
                    },
                    itemStyle: {
                        color: (val) => {
                            return new _this.$echarts.graphic.LinearGradient(0, 1, 1, 1, [
                                { offset: 0, color: "#fff"},
                                { offset: 1, color: color[val.dataIndex] },
                            ])
                        },
                    }
                },
                    {
                        name: '',
                        type: 'bar',
                        barWidth: 15,
                        barGap: '-100%', 
                        data: maxData,
                        itemStyle: {
                            normal: {
                                color: '#373F4F',
                                fontSize: 10,
                            },
                        },
                    }]
            };
            chart.setOption(option);
        },

        initChart1(xData,name,data) {
            let _this = this;
            var chartDom = document.getElementById("chart1");
            var chart = _this.$echarts.init(chartDom);
            chart.clear();
            chart.resize();  
            // var xData = ["黄河三角洲","东营区","河口区","垦利区","利津县","广饶县"];
            var color = ['#DEB755', '#00CCCC', '#98D45B', '#1F93FF', '#CD8DE3']
            // var name = ['盐土', '重度盐渍化', '中度盐渍化', '轻度', '非盐渍化']
            // var data = [
            //     [13.7, 3.4, 13.5, 16.1, 7.4, 15.2],
            //     [17.4, 13.7, 13.5, 3.4, 15.2, 13.5],
            //     [13.4, 7.4, 13.7, 13.5, 16.1, 13.7],
            //     [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
            //     [16.1, 13.5, 3.7, 17.4, 15.2, 18.9]
            // ]

            var series = [];
            for (var i = 0; i < 5; i++) {
                series.push({
                    name: name[i],
                    type: "line",
                    symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
                    symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                    smooth: true, //是否平滑曲线显示
                    showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
                    areaStyle: {
                        normal: {
                            color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: color[i]
                            }, {
                                offset: 0.8,
                                color: 'rgba(255,255,255,0)'
                            }], false),
                            // shadowColor: 'rgba(255,255,255, 0.1)',
                            shadowBlur: 10,
                            opacity:0.3,
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: color[i],
                            lineStyle: {
                                width: 1,
                                type: 'solid' //'dotted'虚线 'solid'实线
                            },
                            borderColor: color[i], //图形的描边颜色。支持的格式同 color
                            borderWidth: 8 ,//描边线宽。为 0 时无描边。[ default: 0 ] 
                            barBorderRadius: 0,
                            label: {
                                show: false,
                            },
                            opacity:0.5,
                        }
                    },
                    data: data[i],

                })
            }
            var option = { 
                legend: {
                    top: 0,
                    right: 0,
                    itemGap:5,
                    itemWidth:5,
                    textStyle: {
                        color: '#fff',
                        fontSize: '12'
                    },
                    data: name
                }, 
                tooltip: {
                    trigger: "axis",
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'line', // 默认为直线，可选为：'line' | 'shadow'
                        lineStyle: {
                            color: '#57617B'
                        }
                    },
                    formatter: '{b}<br />{a0}: {c0}Km²<br />{a1}: {c1}Km²<br />{a2}: {c2}Km²<br />{a3}: {c3}Km²<br />{a4}: {c4}Km²',
                    backgroundColor: 'rgba(0,0,0,0.7)', // 背景
                    borderColor: 'rgba(0,0,0,0.7)', // 边框 
                    textStyle: {
                        color: '#fff',
                        fontSize: '14'
                    },
                    padding: [8, 10], //内边距
                    extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
                },
                grid: { 
                    top: "24%",
                    bottom: "12%", 
                    left: "15%", 
                    right: "10%", 
                },
                xAxis: [{
                    type: "category",
                    axisLine: { 
                        symbol: ['none', 'arrow'],
                        symbolSize: [7, 10], 
                        symbolOffset: 18,
                        lineStyle: {
                            color: '#999', 
                            shadowOffsetX: 12,
                            shadowColor: '#999',
                        }
                    },
                    
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#32346c ',
                        }
                    },
                    boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
                    axisTick: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    },
                    axisLabel: {
                        inside: false,
                        interval: 0,
                        textStyle: {
                            color: '#fff',
                            fontWeight: 'bold',
                            fontSize: '13',
                        },
                    }, 
                    data: xData,
                }],
                yAxis: {
                    type: 'value',
                    name: "面积(Km²)",
                    nameTextStyle: {
                        color: "#FFFFFF",
                        fontSize: 13
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        symbol: ['none', 'arrow'],
                        symbolSize: [7, 10], 
                        symbolOffset: 20,
                        lineStyle: {
                            color: '#999', 
                            shadowOffsetY: -20,
                            shadowColor: '#999',
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#999999',
                            type: 'dotted',
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#B4C0CC',
                            fontWeight: 'bold',
                            fontSize: '14',
                        }, 
                    },
                },
                series: series,
            }
            chart.setOption(option);
            
        },
        choseBtn(item){
            this.isActive = item;
            this.getBarData(this.BarUrl,this.diaTime);
        },
        changeLayer(layer){
            let _this = this;
            _this.layer = layer;
            if(_this.diaTitle == "东营农高区传感器"){
                _this.getNgqData(); 
            }else if(_this.diaTitle == "东营渤海农场传感器"){
                _this.getBhncData(); 
            }
        },
        sensorMessage(data){  
            let _this = this;  
            _this.dialogVisible = true;
            _this.diaTitle = data;
            _this.pageNum = 1;
            _this.pageSize = 20;
            _this.total = 0;
            if(data == "东营农高区传感器"){
                _this.layer = "20";
                _this.getNgqData(); 
            }else{
                _this.layer = "15";
                _this.getBhncData(); 
            }
            
        },
        getNgqData(){
            let _this = this;  
            let url = `${_this.$baseUrl}/yjd/sensorData/getAllData`;
            let params = {
                pageNum: _this.pageNum,
                pageSize: _this.pageSize,
                depth: _this.layer
            };
            _this.$axios.get(url, { params: params }).then(res => {  
                _this.tableList.data = res.data.data.records;
                _this.total = res.data.data.total; 
                let devData = [
                    { img: require("@static/img/湿度.png"), text: "VWC(%)", data: "vwc", num: "61.2" },
                    { img: require("@static/img/温度.png"), text: "温度(℃)", data: "temperature", num: "19.2" },
                    { img: require("@static/img/风向.png"), text: "介电常数", data: "permittivity", num: "135" }, 
                    { img: require("@static/img/降雨量.png"), text: "表观EC(uS/cm)", data: "apparent", num: "0" },
                    { img: require("@static/img/压强.png"), text: "孔隙水EC(uS/cm)", data:"voidWater", num: "965.5" },
                ];
                let newData = res.data.data.records[0];  
                _this.diaTime = newData.samplingTime;
                devData.forEach(item => {
                    if (newData.hasOwnProperty(item.data)) {
                        item.num = newData[item.data].toString();
                    }
                });
                _this.devData = devData;
                
                
            }).catch(err => {});
        },
        getLayer(layer){ 
            if(layer == "15") return "1";
            if(layer == "30") return "2";
            if(layer == "45") return "3";
            if(layer == "60") return "4";
            if(layer == "75") return "5";
            if(layer == "90") return "6";
            if(layer == "105") return "7";

        },
        getBhncData(){
            let _this = this;  
            let url = `${_this.$baseUrl}/yjd/sensorData/getDybhList`;
            let layer = _this.getLayer(_this.layer);
            let params = {
                pageNum: _this.pageNum,
                pageSize: _this.pageSize,
                layer
            };
            _this.$axios.get(url, { params: params }).then(res => { 

                _this.tableList1.data = res.data.data.records;
                _this.total = res.data.data.total; 
                
                let devData = [
                    { img: require("@static/img/湿度.png"), text: "土壤体积含水量", data: "vwc", num: "61.2" },
                    { img: require("@static/img/温度.png"), text: "土壤温度", data: "temp", num: "19.2" },
                    { img: require("@static/img/风向.png"), text: "土壤介电常数", data: "permi", num: "135" }, 
                    { img: require("@static/img/降雨量.png"), text: "土壤EC", data: "ecb", num: "0" },
                    { img: require("@static/img/压强.png"), text: "土壤溶液EC", data: "ecp", num: "965.5" },
                ]

                let newData = res.data.data.records[0]; 
                devData.forEach(item => {
                    if (newData.hasOwnProperty(item.data)) {
                        item.num = newData[item.data].toString();
                    }
                });
                _this.devData = devData;
                
            }).catch(err => {});
        },
        handleSizeChange(val) { 
            let _this = this;  
            _this.pageSize = val;
            if(_this.diaTitle == "东营农高区传感器"){
                _this.getNgqData(); 
            }else if(_this.diaTitle == "东营渤海农场传感器"){
                _this.getBhncData(); 
            }
        },
        handleCurrentChange(val) { 
            let _this = this;  
            _this.pageNum = val;
            if(_this.diaTitle == "东营农高区传感器"){
                _this.getNgqData(); 
            }else if(_this.diaTitle == "东营渤海农场传感器"){
                _this.getBhncData(); 
            }
        },
        changeSelect(data){   
            let _this = this;    
            if(_this.$route.path.includes("dataCollection")&&_this.data.length > 0){ 
                let checkedNodes = this.$refs.treeForm.getCheckedNodes(); 
                if(checkedNodes.length > 0){
                    _this.$refs.treeForm.setCheckedKeys([]);
                }    
            }
            _this.data = _this.allTreeData[data] || [];
            _this.showLegend = false;  
            _this.getValue(data);
            if(data !== "东营"){
                _this.showTestFieldDia = false;
            } 
        },
        getValue(data){
            let _this = this;  
            if(data == "全国"){ 
                _this.value = `${data}层级`;
            }else{
                _this.value = `${data}试验站层级`; 
            } 
        },
        clickLegend(type){   
            let _this = this;  
            if(type == "全图"){
                _this.$bus.$emit("send-Message", "小地球"); 
            }else{
                _this.showLegend = !_this.showLegend;
            }
        },
        treeCheck(data, checked) {
            let _this = this;     
            // _this.showTestfield = false;
            if(_this.currentCheckData.id === data.id) {
                _this.currentCheckData = {};
                _this.$refs.treeForm.setCheckedKeys([]); 
                _this.showTestFieldDia = false; 
            }else {  
                _this.currentCheckData = data;
                _this.$refs.treeForm.setCheckedKeys([data.id]);   
                
                
            }     
            
            var newRegionData = null;
            _this.legendData.forEach(item => { 
                if(data.label.includes(item.title)){ 
                    newRegionData = item; 
                }  
            });
            if(newRegionData && checked["checkedKeys"].length !== 0){
                _this.legendList = newRegionData; 
                _this.showLegend = true;
            }else{
                _this.showLegend = false;
            }  
            
            
            let parent = _this.findParentNode(data.id,_this.data); 
            if(checked["checkedKeys"].length >0){
                _this.nodeClick(data);
                _this.$bus.$emit("send-Message",`${parent.label}_${data.label}_开`);  
            }else{ 
                _this.$bus.$emit("send-Message",`${parent.label}_${data.label}_关`);  
            }
 
            
            

        },  

        findNodeById(dataArray, idToFind) {
            for (let i = 0; i < dataArray.length; i++) {
                const data = dataArray[i];
                console.log(idToFind,data.id);
                
                // 检查当前节点的id是否匹配
                if (idToFind.includes(data.id)) {
                    return data;
                }
                // 如果当前节点有children，递归搜索
                if (data.children) {
                    const foundNode = this.findNodeById(data.children, idToFind);
                    if (foundNode) {
                        return foundNode; // 如果在子节点中找到匹配的id，返回结果
                    }
                }
            }
            return null; // 如果没有找到，返回null
        },

        findParentNode(id, data){
            for(let i=0;i<data.length;i++){
                if(data[i].id === id){
                    return data[i];
                }else if(data[i].children){
                    let parent = this.findParentNode(id, data[i].children); 
                    if(parent){
                        return data[i];
                    }
                }   
            }  
        },
    },
    watch: {
        treeData(){},
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/pages.scss"; 
@import "@/assets/styles/overView.scss";  
.right{ 
    top: 0;
    z-index: 11;
    .right1_chart{
        height: 24vh;
    }

    .btn_group{
        padding: 1vh 1vw;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.6vh 0.4vw;
        >div{
            background-color: rgba(45,74,111,.8);
            color: #C8F2FE;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 63px;
            text-align: center;
            padding: 0.8vh 0;
            cursor: pointer;
            font-size: 0.8vw;
        }
        >div:hover, .bth_active{
            background-color: rgba(65,129,209,.8);
        } 
    }

    #chart2{
        height: 22vh;
    }
}
.testField_dialog{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -56%);
    width: 24vw;
    background: url("~@static/img/弹窗bg.png") no-repeat center center/100% 100%;
    padding: 2.4vh 1vw;
    box-sizing: border-box; 
    z-index: 11;

    .testField_title{
        color: #F0F1F5;
        font-size: 1vw;
        .el-icon-caret-right{
            color: #00FFFF;
        }
        .el-icon-close{
            color: #94A0B7;
            font-weight: 900;
            cursor: pointer;
        }
    }

    >img:nth-of-type(1){
        width: 100%;
        height: 18vh;
        margin: 1.6vh 0;
    }

    .testField_subTitle{
        font-size: 1vw;
        border-radius: 0.3vw;
        overflow: hidden;
        >div:nth-child(1){
            color: #00FFFF;
            background-color: #0F3741;
            padding: 0.4vh 0.8vw;
        }
        >div:nth-child(2){
            color: #FFFFFF;
            background-color: #069B9F;
            padding: 0.4vh 0.8vw;
            flex: 1;
        }
        margin-bottom: 1.6vh;
    }

    .custom_tbody{
        height: 30vh;
        color: #94A0B7;
        >tr{
            padding: 0.6vh 0;
        }
    }
    thead{
        background-color: #1e2331;
    }
    .table_title{
        color: #F0F1F5;
        font-size: 1vw;
        >th{
            padding: 1vh 0;
        }
    }

    .tr1{
        background-color: #333C4C;
    }
}
.legend_part{
    z-index: 11;
    left: 400px !important;
    right: unset !important;
    // bottom: 103px !important;
}
.style1{
    background: linear-gradient(0deg, #39A800, #5EBA00, #78C900, #A2DA00, #D6EF00, #FFF900, #FFB700, #FF8300, #FF7D00, #FF4800, #FF1D00)
}
.tools_cell, .left_cell{
    z-index: 10;
    position: relative;
}
.legend{
    z-index: 20;
    bottom: 20px !important;
} 

.dialog_bg{
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: -132px; 
    left: 0;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    z-index: 60;
}

.dialog_box{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 20;
    transform: translate(-50%, -50%);
    width: 62vw; 
    background: url("~@static/img/dialog.png") no-repeat center center/100% 100%;
    padding: 14px;
    box-sizing: border-box; 

    .title_left{
        color: #F0F1F5;
        >div:nth-child(1){
            font-weight: bold;
            padding-left: 24px;
            background: url("~@static/img/定位w.png") no-repeat 0 center/ 18px 18px;
            margin-right: 30px;
        }
        >div:nth-child(2){
            >span{
                background-color: rgba($color: #181C2A, $alpha: 0.92);
                padding: 4px 10px;
                border-radius: 6px;
                font-size: 14px;
                cursor: pointer;
                line-height: 28px;
                height: 28px;
                &:hover{
                    background-color: rgba($color: #29E3FC, $alpha: 0.92);
                }
            }

            .active{
                background-color: rgba($color: #29E3FC, $alpha: 0.92) !important;
            }
        }
    }
    .dialog_title> i{ 
        color: #F0F1F5;
        font-weight: bold;
        cursor: pointer;
    }

    .dev_name{
        margin: 16px 0;
        color: #F5F5F5;
        font-size: 14px;
        >span{
            color: #1FD7FF;
            margin-right: 10px;
        }
    }

    .dev_body{
        .dev_img{
            width: 206px;
            // height: 218px;
            margin: 30px;
            position: relative;
            >img{
                width: 100%;
                height: auto;    
            }

            .layering_cell{
                position: absolute;
                border: 1px solid rgba(89,175,249,0.7);
                background-color: rgba(29,43,66,0.8);
                padding: 4px 2px;
                p{
                    padding: 4px 10px;
                    color: #E5E5E5;
                    cursor: pointer;
                    &:hover{
                        background-color: #29E3FC;
                    }
                }
            }

            .active{
                background-color: #29E3FC;
            }

            .ngq_layering{
                height: 166px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                bottom: 20px;
                right: 0;
            }
            .bh_layering{
                bottom: 8px;
                right: 0;
            }
        }
        
        >div{
            width: calc(100% - 236px);
        }
    }

    .dev_group{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin: 20px 0;
        >div{
            display: flex;
            img{
                width: 6vw;
                height: 6.2vw;
                margin-right: 16px;
            }
            >div{
                color: #FFFFFF;
                font-size: 1vw;
                font-weight: bold;
                text-align: center;
                >p:nth-child(2){
                    color: #28E3C4;
                    font-family: "DingTalk";
                    font-weight: normal;
                    margin-top: 16px;
                }
            }
        }
    }
}

.flex{
    display: flex;
    align-items: center;
}
.justify_between{
    justify-content: space-between;
}

.table_cell{
    table{
        color: #FFFFFF;
    }
    thead{
        background-color: rgba(12,203,244,0.4);
        height: 50px;
    }
    .tr2{
        background-color: rgba(4,73,112,0.6);
    }
    .custom_tbody{
        height: 300px;
        margin-bottom: 14px;
    }
}

.el-pagination{ 
    margin: 14px 0;
    text-align: right; 

    /deep/ .el-input__inner{  
        background-color: transparent;
        color: #6A869B;
        border-color: #6A869B !important;
    }
    /deep/ .btn-next,/deep/ .el-pager li, /deep/ .btn-prev{
        background-color: transparent !important;
    } 
    /deep/ .el-pager li{
        color: #6A869B;
    }
    /deep/ .active{
        color: #D5DDF4 !important; 
    }
    /deep/ .btn-next, /deep/ .btn-prev{
        color: #D5DDF4;
    }
}

</style>